<template>
<view>
<view class="appraise">
  <view v-for="(item, index) in navList" :key="index" @tap="getStatus" :id="'NAV' + index" class="appraise-title" :data-index="index">
    <view @tap="EventHandle">
      <text :class="index === status ? 'active' : ''">{{item}}</text>
    </view>
  </view>
</view>
<!-- <view hidden="{{status!==0}}" class='particulars-warp'>
  <view class='particulars'>
    <view class='pay-warp' wx:for="{{groupList}}" wx:key="indexone" data-index="{{indexone}}">
      <view class='pay'>
        <view class='code fl'>
          <text>订单号：{{item.order_sn}}</text>
        </view>
      </view>
      <view class='popup-warp'>
        <view class='popup-pic fl'>
          <image src="{{item.goods_img}}"></image>
        </view>
        <view class='pop-warp fr'>
          <view class='pop-title'>
            <text>{{item.goods_name}}</text>
          </view>
          <view class='pop-spec'>
            <text>商品规格</text>
          </view>
          <view class='pop-current'>
            <text>￥</text>
            <text>{{item.goods_amount}}</text>
          </view>
          <view class='pop-repertory fr'>
            <text>x{{item.nums}}</text>
          </view>
        </view>
      </view>
      <view class='needpay-warp'>
        <view class='needpay fr'>
          <text>需支付：</text>
          <view class='paycount'>
            <text>￥</text>
            <text>{{item.goods_amount}}</text>
          </view>
        </view>
      </view>
      <view class='needpay-warp'>
        <view class='needpay fr'>
          <navigator class="gopay cancel fl">
            <view>
              <text>取消订单</text>
            </view>
          </navigator>
          <navigator class="gopay fl" to="../../packageA/affirm/affirm">
            <view>
              <text>去支付</text>
            </view>
          </navigator>
        </view>
      </view>
    </view>
  </view>
  <view wx:if="{{groupList == null}}">
    <image src='../../img/NODATA (2).png' class='nodata'></image>
         <text class='noData'> 暂无数据</text>
  </view>
</view> -->
<view :hidden="status!==0" class="particulars-warp">
  <view v-for="(item, index) in groupList" :key="index" class="pay-warp" :data-index="index" @tap="tokaituan">
    <view class="pay">
      <view class="code fl">
        <text>订单号：{{item.order_sn}}</text>
        <text class="pintuan">拼团进行中</text>
      </view>
    </view>
    <view class="popup-warp">
      <view class="popup-pic fl">
        <image :src="item.goods_img"></image>
      </view>
      <view class="pop-warp fr">
        <view class="pop-title">
          <text>{{item.goods_name}}</text>
        </view>
          <view class="pop-current">
          <text>￥</text>
          <text>{{item.goods_amount}}</text>
        </view>
         <view class="pop-repertory fr">
          <text>x{{item.nums}}</text>
        </view>
      </view>
    </view>
  </view>
  <view v-if="groupList.length == 0" class="zanwu">
    <image src="/static/remao_shop/img/NODATA (2).png" class="nodata"></image>
    <view class="noData"> 暂无数据</view>
  </view>
</view>
<view :hidden="status!==1" class="particulars-warp">
  <view v-for="(item, index) in groupList" :key="index" class="pay-warp" :data-index="index" @tap="toSpellsuccess">
    <view class="pay">
      <view class="code fl">
        <text>订单号：{{item.order_sn}}</text>
        <text class="pintuan">拼团成功</text>
      </view>
    </view>
    <view class="popup-warp">
      <view class="popup-pic fl">
        <image :src="item.goods_img"></image>
      </view>
      <view class="pop-warp fr">
        <view class="pop-title">
          <text>{{item.goods_name}}</text>
        </view>
        <view class="pop-spec">
          <text>{{item.message}}</text>
        </view>
        <view class="pop-current">
          <text>￥</text>
          <text>{{item.goods_amount}}</text>
        </view>
        <view class="pop-repertory fr">
          <text>x{{item.nums}}</text>
        </view>
      </view>
    </view>
  </view>
  <view v-if="groupList.length == 0" class="zanwu">
    <image src="/static/remao_shop/img/NODATA (2).png" class="nodata"></image>
    <view class="noData"> 暂无数据</view>
  </view>
</view>
<view :hidden="status!==2" class="particulars-warp">
  <view v-for="(item, index) in groupList" :key="index" class="pay-warp" :data-index="index" @tap="toSpellfailed">
    <view class="pay">
      <view class="code fl">
        <text>订单号：{{item.order_sn}}</text>
        <text class="pintuan">拼团失败</text>
      </view>
    </view>
    <view class="popup-warp">
      <view class="popup-pic fl">
        <image :src="item.goods_img"></image>
      </view>
      <view class="pop-warp fr">
        <view class="pop-title">
          <text>{{item.goods_name}}</text>
        </view>
        <view class="pop-spec">
          <text>{{item.message}}</text>
        </view>
      </view>
    </view>
  </view>
  <view v-if="groupList.length == 0" class="zanwu">
      <image src="/static/remao_shop/img/NODATA (2).png" class="nodata"></image>
      <view class="noData"> 暂无数据</view>
    </view>
</view>
</view>
</template>

<script>
import api from "../../../api";
var app = getApp();

export default {
  data() {
    return {
      navList: ["待成团", "拼团成功", "拼团失败"],
      status: 0,
      hidden: false,
      ss: "",
      uid: "",
      groupList: ""
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getID();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.getList();
    wx.stopPullDownRefresh();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    getStatus(e) {
      console.log(e.currentTarget.dataset.index);
      this.setData({
        status: e.currentTarget.dataset.index,
        hidden: false,
        ss: e.currentTarget.dataset.index + 2
      });
      this.getList(e.currentTarget.dataset.index); // this.submit();
    },

    //获取用户ID
    getID: function () {
      wx.getStorage({
        key: 'userId',
        success: res => {
          this.setData({
            uid: res.data,
            ss: 2
          });
          this.getList(1);
        }
      });
    },
    //获取我的拼团列表
    getList: function (ss) {
      app.globalData.request({
        url: api.gzSea.mygroup,
        data: {
          user_id: this.uid,
          status: this.ss
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded' // 默认值

        },
        method: 'POST',
        success: res => {
          console.log(res.data);
          this.setData({
            groupList: res.data
          });
        }
      });
    },

    tokaituan(e) {
      console.log(e);
      var index = e.currentTarget.dataset.index;
      var id = this.groupList[index].order_id;
      wx.navigateTo({
        url: '../../packageA/spellwait/spellwait?id=' + id
      });
    },

    toSpellsuccess(e) {
      console.log(e);
      var index = e.currentTarget.dataset.index;
      var id = this.groupList[index].order_id;
      wx.navigateTo({
        url: '../../packageB/spellsuccess/spellsuccess?id=' + id
      });
    },

    toSpellfailed(e) {
      console.log(e);
      var index = e.currentTarget.dataset.index;
      var id = this.groupList[index].order_id;
      wx.navigateTo({
        url: '../../packageB/spellfailed/spellfailed?id=' + id
      });
    } // submit(e) {
    //   console.log(e)
    //   var a = e.detail.formId
    //   wx.getStorage({
    //     key: 'userId',
    //     success: function (aaa) {
    //       console.log(aaa.data)
    //       var open = aaa.data
    //       console.log(open)
    //       if (a == 'the formId is a mock one') {
    //         return;
    //       } else {
    //         app.request({
    //           url: api.gzSea.test, //仅为示例，并非真实的接口地址
    //           data: {
    //             form_id: a,
    //             user_id: open
    //           },
    //           method: 'POST',
    //           header: {
    //             'content-type': 'application/x-www-form-urlencoded' // 默认值
    //           },
    //           success(res) {
    //             console.log(res)
    //           }
    //         })
    //       }
    //     },
    //   })
    // }


  }
};
</script>
<style>
@import "./spellgroup.css";
</style>